Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft: Large item count performance #1170

Merged
merged 46 commits into from
Aug 27, 2024
Merged

Draft: Large item count performance #1170

merged 46 commits into from
Aug 27, 2024

Conversation

Xon
Copy link
Collaborator

@Xon Xon commented Aug 22, 2024 •
edited
Loading

Performance for large number of items and choices is lacking.

The following bottlenecks have been identified:

  • No end-to-end tests to identify performance issues with large number of items
    • Example e2e page experiencing performance issues
    • e2e test against the page to track and confirm the issues are resolved
  • All items are re-rendered whenever an item is added or removed
    • track the rendered element, and only render it if required

@Xon Xon added bugfix Pull request that fixes an existing bug chore Pull request that does not change core code refactor Pull request that refactors existing functionality labels Aug 22, 2024
@Xon Xon self-assigned this Aug 22, 2024
This was linked to issues Aug 22, 2024
Multi select inputs with a total of 1.000 choices on one page freezes browser #599
Closed
400 items - Performance issues - Slow #816
Closed
@Xon Xon changed the title Large item count performance Draft: Large item count performance Aug 23, 2024
@Xon Xon marked this pull request as draft August 23, 2024 00:51
@Xon Xon mentioned this pull request Aug 23, 2024
Closed
Xon added 21 commits August 26, 2024 01:15
@Xon
Reduce work done for unhighlightAll during on-click handler (batch ha…
6cb9667 
…ndler in v11.0.0-rc8 would also have helped) Choices-js#522 Choices-js#599
@Xon
Performance tests with thousands of items selected
26c843a
@Xon
Inline highlightItem/unhighlightItem to avoid quadratic complexity
491652b
@Xon
Switch from string literal type to effectively valueOf<EventType> to …
9f9eed4 
…intern strings
@Xon
Update tests to permit newer target versions (main source tree still …
8a66486 
…targets ES5)
@Xon
Fix fragile highlightall/unhighlightall tests
4468603
@Xon
Dramatically reduce the performance impact of changing items (avoid r…
0e7789e 
…e-rendering all items on every change)
@Xon
Support item rendering latching onto pre-rendered items
89537aa
@Xon
Handle case where the element needs to be regenerated
f84bdc9
@Xon
Fix placeholder not applying as expected for select-one when loading …
e4d3f9c 
…items
@Xon
Push highlight css toggle into reducer, simplifying state tracking
0d74ffc
@Xon
Avoid touching every item after an item is added, instead call unhigh…
a6179d8 
…lightall as required
@Xon
Simplify _onBlur & _onFocus
60f08bb
@Xon
Adjust unhighlightAll to generally be called in a _store.withTxn to r…
4a45aba 
…educe redundnant rendering passes
@Xon
Hoist variables to reduce bundle size
298ecb7
@Xon
Preserve choices associated with groups
e3f085b
@Xon
Inline renderChoice functionality & cleanup duplication
77b2811
@Xon
Cache element/group to reduce rendering time
68bd104
@Xon
Avoid reflows by using display: none; vs visibility: hidden;
3b857c5
@Xon
Remove overly fragile unit testing of rendering
3f849e1
@Xon
Restore older placeholder rendering behavior
44c2407
@Xon Xon force-pushed the large-item-count-performance branch from d1ecaa4 to 1f6415a Compare August 25, 2024 18:43
@Xon
Copy link
Collaborator Author

Xon commented Aug 25, 2024

I've gotten item and choices rendering performance being acceptable, but selecting a choice and it being converted into an item is still doing more work than expected

Xon added 20 commits August 26, 2024 03:05
@Xon
Adjust when the choice's cached element is purged
99e33c9
@Xon
Simplify groupId check, and push group label rendering into template
a2ddd5a
@Xon
Use Element.replaceChildren API, update polyfill definition
d4db913
@Xon
Compile JS files
acf08d0
@Xon
Disable unusably slow test
e435374
@Xon
Commit linter fixes
e784912
@Xon
cleanup css
8b8439a
@Xon
Remove unused eslint disable
1dae822
@Xon
Add ValueOf utility type
b364578
@Xon
Use const object instead of loose constants for text/select-one/selec…
a0f42ea 
…t-multiple
@Xon
Allow renderSelectedChoices to be a direct boolean to simplify intern…
c7ab134 
…al logic
@Xon
Add e2e test for renderSelectedChoices flag
dfb15a7
@Xon
Invalidate cached choice when an item is added/removed & fix renderSe…
b5b6c8e 
…lectedChoices === 'always' with select-multiple
@Xon
Revert & add some variable hoisting as it compressed better
5f5a057
@Xon
Cleanup unused function and redundant variable assignment
f1c3170
@Xon
Update tests
63653f0
@Xon
Compile JS files
f6b54f7
@Xon
Cleanup unused import
d3028c7
@Xon
Commit lint fixed file
9e60d6e
@Xon
Update CHANGELOG.md
b6e9809
@Xon Xon marked this pull request as ready for review August 27, 2024 13:15
@Xon Xon merged commit f534235 into Choices-js:main Aug 27, 2024
11 checks passed
@Xon Xon deleted the large-item-count-performance branch August 27, 2024 22:35
@Xon Xon removed the chore Pull request that does not change core code label Aug 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@Xon Xon

Labels
bugfix Pull request that fixes an existing bug refactor Pull request that refactors existing functionality
Projects
None yet
Milestone
No milestone
1 participant
@Xon